<template>
	<view class="content">
		<!-- 顶部的搜索 -->
		<view class="top-search">
			<view class="classify">
			<text  @click="classIfy" >登录 </text>  <text @click="register"> 注册</text>
			</view>
			<view class="title-center">
				云音悦
			</view>
			<navigator url="/pages/searchMusic/searchMusic" class="classify">
				<image src="../../img/search.png" mode=""></image>
			</navigator>
		</view>
		
	    <view class="header">
	    	<text :class="{active:index == 0}"  @click="index = 0"  >推荐</text>
	    	<text :class="{active:index == 1}"  @click="index = 1"  >	歌手</text>
	    	<text :class="{active:index == 2}"  @click="index = 2"  >排行榜</text>
	    </view>
		
		
		

		
		<view class="bg-warp">
			<!-- 推荐页面 -->
			<recommend v-show="index == 0"></recommend>
			<!-- 歌手页面 -->
			<singer v-show="index == 1"></singer>
			<!-- 排行榜 -->
			<ranking v-show="index == 2" ></ranking>
		</view>
		
	
		
	   <view v-show="index == 1 && index == 2">
	   	<!-- 填充站位 -->
	   	<!-- <view style="height: 140rpx;width: 100%;"  ></view> -->
	   	<musicTabbar></musicTabbar>
	   </view>
		
		
		
	</view>
</template>

<script>
	import ranking from '../ranking/ranking.vue'
	import singer from '../singer/singer.vue'
	import recommend from '../recommend/recommend.vue'
	import musicList from '../../components/musicList/musicList.vue'
	import musicCard from '../../components/musicCard/musicCard.vue'
	import musicTabbar from '../../components/musicTabbar/musicTabbar.vue'
	export default {
		data() {
			return {
				index:0
			}
		},
		onLoad() {
		},
		methods: {
			classIfy(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			register(){
				uni.navigateTo({
					url:'/pages/register/register'
				})
			}
		},
		components:{
			ranking,
			singer,
			recommend,
			musicList,
			musicCard,
			musicTabbar
		}
	}
</script>

<style lang="scss">
	.bg-warp{
		width: 100%;
		height: 100%;
		background-color: #f2f3f4;
		overflow: scroll;
	}
	.music-list{
		display: flex;
	}
	.header{
		width: 100%;
		height: 90rpx;
		background-color: #d44439;
		display: flex;
		align-items: center;
		justify-content: space-around;
		text{
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-weight: 800;
		}
	}
	.active{
		border-bottom: 3rpx solid #fff;
	}
	.title-center{
		font-size: 40rpx;
	}
	.top-search{
		width: 100%;
		height: 100rpx;
		background-color: #d44439;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		color: #fff;
		font-size: 36rpx;
	}
	.classify{
		display: flex;
		image{
			width: 50rpx;
			height: 50rpx;
		}
	}
	
</style>
